<template>
  <div class="detail">
    <el-page-header @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3"> 订单详情 </span>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-button type="primary" @click="handleConfirm"
            v-if="formData.payMethod == 0 && formData.orderStatus == 4">确认订单</el-button>
          <el-button type="primary" @click="handlePayOrder"
            v-if="formData.payMethod == 1 && formData.orderStatus != 5">支付订单</el-button>
          <el-button @click="handleApplyAfterSale" v-if="formData.orderStatus == 5">申请售后</el-button>
        </div>
      </template>
    </el-page-header>
    <div class="detail-wrap">
      <el-form ref="formRef" :model="formData" label-width="120px">
        <el-divider content-position="left">
          <div class="formTitle">订单信息</div>
        </el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单编号：" prop="orderNum">
              {{ formData.orderNum }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单类型:" prop="orderContent">
              <dict-tag :type="DICT_TYPE.ORDER_CONTENT" :value="formData.orderContent" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单状态：" prop="orderStatus">
              <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="formData.orderStatus" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间:" prop="createTime">
              {{ formatDate1(formData.createTime) }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="关闭原因：" prop="closeReason" v-if="formData.orderStatus === 6">
              {{ formData.closeReason }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">
          <div class="formTitle">需求描述</div>
        </el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称：" prop="projectName">
              {{ formData.projectName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="需求简述：" prop="demand">
              {{ formData.demand }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交付物：" prop="deliverables">
              {{ formData.deliverables }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期望交付时间：" prop="expectedDate">
              {{ formatDate2(formData.expectedDate) }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">
          <div class="formTitle">报价信息</div>
        </el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="报价金额：" prop="quote">
              <el-link :href="formData.quoteFile" target="_blank" style="color: #409eff">
                {{ formData.quote === null ? '--' : formData.quote + '元 (查看报价单)' }}
              </el-link>
              <!-- <span v-else> -- </span> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式：" prop="payMethod">
              <dict-tag :type="DICT_TYPE.PAY_METHOD" :value="formData.payMethod" />
              <!-- <span v-else> -- </span> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="报价时间：" prop="quoteTime">
              {{ formatDate1(formData.quoteTime) }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">
          <div class="formTitle">订单支付</div>
        </el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单金额：" prop="quote">
              {{ formData.quote }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="待支付金额：" prop="waitRepayAmount">
              {{ formData.waitRepayAmount }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="已支付金额：" prop="totalRepayAmount">
              {{ formData.totalRepayAmount }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付记录：" prop="systemFinancePaymentRecordsList">
              <el-table :data="formData.systemFinancePaymentRecordsList">
                <el-table-column prop="repayCount" label="支付次数" width="100" align="center" />
                <el-table-column prop="repayAmount" label="支付金额" width="150" align="center" />
                <el-table-column prop="operateTime" label="支付时间" width="180" align="center"
                  :formatter="dateFormatter" />
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider content-position="left">订单交付</el-divider>
      <el-table :data="list" :show-overflow-tooltip="true">
        <el-table-column label="文件名称" align="center" prop="name" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div class="flex items-center justify-center">
              <el-button type="primary" link @click="view(scope.row.url)">查看</el-button>
              <el-button type="danger" link @click="download(scope.row)"
                v-if="formData.orderStatus == 5 && formData.payStatus == 2">
                下载
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 支付订单 -->
    <PayOrder ref="payOrderRef" @success="getOrderDetail" />
    <!-- 申请售后 -->
    <ApplyAfterSale ref="applyAfterSaleRef" @success="getOrderDetail" />
    <!-- 文件预览 -->
    <ViewFile ref="viewFile" />
  </div>
</template>

<script setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useRouter } from 'vue-router'
import PayOrder from './payOrder.vue'
import ApplyAfterSale from './applyAfterSale.vue'
import { ElMessageBox } from 'element-plus'
import * as OrderApi from '@/api/order'
import { formatDate1, formatDate2, dateFormatter } from '@/utils/formatTime'
import ViewFile from './viewFile.vue'
const message = useMessage() // 消息弹窗
const payOrderRef = ref()
const applyAfterSaleRef = ref()
const { currentRoute, push, go } = useRouter()
const list = ref([])
const viewFile = ref()
const formData = ref({
  orderNum: null,
  orderContent: '',
  orderStatus: '',
  createTime: '',
  username: '',
  enterpriseName: '',
  phone: '',
  projectName: '',
  demand: '',
  deliverables: '',
  expectedDate: '',
  quote: '',
  quoteFile: '',
  payMethod: '',
  payStatus: '',
  quoteTime: '',
  totalRepayAmount: '',
  waitRepayAmount: '',
  systemFinancePaymentRecordsList: []
})
/** 返回上一级 */
const goBack = () => {
  go(-1)
}

/** 交付物查看 */
const view = (url) => {
  viewFile.value.open(url)
}

/** 交付物下载 */
const download = ({ name, url }) => {
  // 创建隐藏的可下载链接
  const element = document.createElement('a')
  element.setAttribute('href', url)
  element.setAttribute('download', name)

  // 触发点击
  document.body.appendChild(element)
  element.click()

  // 然后移除
  document.body.removeChild(element)
}

/** 支付订单 */
const handlePayOrder = () => {
  payOrderRef.value.open(formData.value)
}

/** 申请售后 */
const handleApplyAfterSale = () => {
  applyAfterSaleRef.value.open(currentRoute.value.query.id)
}

/** 确认订单 */
const handleConfirm = async () => {
  ElMessageBox.confirm('是否确认完成此订单？', '确认订单', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await OrderApi.orderConfirm({ orderId: currentRoute.value.query.id })
      getOrderDetail()
      message.success('确认成功')
    })
    .catch(() => { })
}
/** 获取订单详情 */
const getOrderDetail = async () => {
  try {
    const data = await OrderApi.getOrderDetail({ orderId: currentRoute.value.query.id })
    if (data.quoteFile) {
      data.quoteFile = JSON.parse(data.quoteFile)[0].url
    } else {
      data.quoteFile = ''
    }
    formData.value = data
    list.value = JSON.parse(data.testReportFile)
  } catch (error) { }
}
onMounted(() => {
  getOrderDetail()
})
</script>

<style lang="scss" scoped>
.detail {
  height: calc(100vh - 175px);
  padding: 0 10px;
  background: var(--el-bg-color);
  text-decoration-color: transparent;

  .el-page-header {
    padding: 15px 0;
  }

  &-wrap {
    height: calc(100% - 60px);
    overflow: auto;
  }

  .formTitle {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
  }

  .el-form-item {
    margin-bottom: 10px;

    :deep(.el-form-item__content) {
      word-break: break-all;
    }
  }

  :deep(.el-card__body) {
    padding-top: 10px;
  }

  :deep(.el-divider__text) {
    font-size: 16px;
    font-weight: bold;
  }

  :deep(.el-table__inner-wrapper::before) {
    display: none;
  }
}
</style>
